<template>
  <div class="cesium-eagle-eye">
    <div id="eagleEyeId" class="eagle-eye-contarter" />
  </div>
</template>

<script>
import "ol/ol.css";
import olMap from "ol/Map";
import olView from "ol/View";
import ollayerTile from "ol/layer/Tile";
import olsourceOSM from "ol/source/OSM";
import { get as getProjection } from "ol/proj";

import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";
var renderEvent = null;
export default {
  name: "CesiumEagleEye",
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    // this.eagleEyePositionInit()
    this.$bus.on("eagleEyePosition", (type) => {
      type === "init"
        ? this.eagleEyePositionInit()
        : this.eagleEyePositionDestroyed();
    });
  },
  methods: {
    initMap() {
      var projection = getProjection("EPSG:4326");
      // eslint-disable-next-line new-cap
      this.map = new olMap({
        target: "eagleEyeId",
        layers: [
          // eslint-disable-next-line new-cap
          new ollayerTile({
            // eslint-disable-next-line new-cap
            source: new olsourceOSM(),
          }),
        ],
        // eslint-disable-next-line new-cap
        view: new olView({
          center: [108, 30],
          projection: projection,
          zoom: 5,
        }),
      });
      //    var attribution = new ol.control.Attribution();
      // attribution.element.style.display = 'none'
    },
    eagleEyePositionInit() {
      if (!this.map) {
        this.initMap();
      }
      if (renderEvent) return;
      renderEvent = viewer.scene.postRender.addEventListener(() => {
        const position = DxCommonUtils.getCenterPosition();
        const z = this.getZoomLevel(viewer.camera);
        this.map.getView().animate({
          center: [position.lon, position.lat, z],
          duration: 300,
        });
        // this.map.setCenter(position.lon, position.lat, z)
      });
    },
    eagleEyePositionDestroyed() {
      renderEvent();
      setTimeout(() => {
        renderEvent = null;
      });
    },
    getZoomLevel(camera) {
      const h = camera.positionCartographic.height;
      if (h <= 100) {
        // 0.01
        return 19;
      } else if (h <= 300) {
        // 0.02
        return 18;
      } else if (h <= 660) {
        // 0.05
        return 17;
      } else if (h <= 1300) {
        // 0.1
        return 16;
      } else if (h <= 2600) {
        // 0.2
        return 15;
      } else if (h <= 6400) {
        // 0.5
        return 14;
      } else if (h <= 13200) {
        // 1
        return 13;
      } else if (h <= 26000) {
        // 2
        return 12;
      } else if (h <= 67985) {
        // 5
        return 11;
      } else if (h <= 139780) {
        // 10
        return 10;
      } else if (h <= 250600) {
        // 20
        return 9;
      } else if (h <= 380000) {
        // 30
        return 8;
      } else if (h <= 640000) {
        // 50
        return 7;
      } else if (h <= 1280000) {
        // 100
        return 6;
      } else if (h <= 2600000) {
        // 200
        return 5;
      } else if (h <= 6100000) {
        // 500
        return 4;
      } else if (h <= 11900000) {
        // 1000
        return 3;
      } else {
        return 2;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cesium-eagle-eye {
  position: fixed;
  right: 80px;
  bottom: 60px;
  width: 300px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.618);
  box-sizing: border-box;
  box-shadow: 0 0 8px #fff, 0 0 4px #fff inset;
  border-radius: 8px;
  color: #fff;
  overflow: hidden;
  .eagle-eye-contarter {
    width: 100%;
    height: 100%;
  }
}
</style>
